import { getAppData, setGlobalData } from '@utils/tools'
import { BasePage } from '@common/components/base-page'
import Banner from '@components/swiper'
import type CustomTabBar from '../../custom-tab-bar'
import Jump from '@utils/jump'
import IQRequest from '@common/iq-request/request'
import AppRoute from '@utils/route/index'
import { View, Image, Text, Button, ScrollView } from '@tarojs/components'
import badge from '../../assets/img/badge.png'
import arrow from '../../assets/img/arrow.png'
import watch from '../../assets/img/watch.png'
import Taro from '@tarojs/taro'
import style from './index.module.scss'
import CommonTabs from '@components/common-tabs'


interface IProps { }
interface IState {
    mallBanner: any
}
export default class Mall extends BasePage<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            mallBanner: []
        }
    }
    handleClick() {
        Taro.login({
            success(result) {
                console.log(result, '获取结果')
            },
        })
    }
    componentDidShow() {
        let pageCtx = Taro.getCurrentInstance().page
        const tabbar = Taro.getTabBar<CustomTabBar>(pageCtx)
        tabbar?.switchTab(2)
        setGlobalData({
            tabIndex: 2
        })
        let param = {
            'filter[category]': 2,
            'page': 1,
            'perPage': 10
        }
        console.log('商城页面')
        IQRequest.VIVORequest('/api/v1/banner/list', param, { method: 'GET' }).then((response: any) => {
            this.setState({
                mallBanner: response.data.list
            })
        }
        )
    }

    render() {
        const tabList = [{ title: '全部',key:'0' }, { title: '实物礼品',key:'1' }, { title: '虚拟礼品',key:'2' }]
        return (
            // 隐藏滚动条
            <ScrollView style={{ height: '100vh' }} enhanced={true} scrollY={true}>
                <Banner bannerList={this.state.mallBanner} className={style.banner} />
                <View className={style.createCon}>
                    <View className={style.second}>
                        <Image className={style.badge} src={badge}></Image>
                        <View className={style.my}>
                            <View className={style.values}>我的创作值</View>
                            <View className={style.number}>8888</View>
                        </View>
                    </View>
                    <View className={style.record}>
                        <View className={style.fonts} onClick={() => { Jump.jump({ url: AppRoute.MODULES.CREATE }) }}>
                            <Text >创作值记录</Text>
                            <Image className={style.arrow} src={arrow}></Image>
                        </View>
                    </View>
                </View>
                <View className={style.mallList}>
                    <CommonTabs tabList={tabList} />
                    <View className={style.listCon}>
                        {/* 列表数据 */}
                        <View className={style.lists} onClick={() => { Jump.jump({ url: AppRoute.MODULES.TASKINFO }) }}>
                            <View className={style.tops}>
                                <Image src={watch}></Image>
                            </View>
                            <View>
                                <Text className={style.titles}>vivo WATCH GT eSIM…</Text>
                                <View className={style.numBox}>
                                    <Text className={style.num}>288888</Text>
                                    <Text className={style.mallNum}>创作值</Text>
                                </View>
                                <View className={style.inter}>
                                    <Text className={style.leftNum}>库存 200</Text>
                                    <Button className={style.change}>去兑换</Button>
                                </View>
                            </View>
                        </View>
                        <View className={style.lists}>
                            <View className={style.tops}>
                                <Image src={watch}></Image>
                            </View>
                            <View>
                                <Text className={style.titles}>vivo WATCH GT eSIM…</Text>
                                <View className={style.numBox}>
                                    <Text className={style.num}>288888</Text>
                                    <Text className={style.mallNum}>创作值</Text>
                                </View>
                                <View className={style.inter}>
                                    <Text className={style.leftNum}>库存 200</Text>
                                    <Button className={style.change}>去兑换</Button>
                                </View>
                            </View>
                        </View>
                        <View className={style.lists}>
                            <View className={style.tops}>
                                <Image src={watch}></Image>
                            </View>
                            <View>
                                <Text className={style.titles}>vivo WATCH GT eSIM…</Text>
                                <View className={style.numBox}>
                                    <Text className={style.num}>288888</Text>
                                    <Text className={style.mallNum}>创作值</Text>
                                </View>
                                <View className={style.inter}>
                                    <Text className={style.leftNum}>库存 200</Text>
                                    <Button className={style.change}>去兑换</Button>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>
            </ScrollView>
        )
    }
}
